<template>
    <div class="tableWrap">
        <a-table :row-style="{ height: '28px' }" class="custom-table-header" ref="tableRef"
            :customHeaderCell="customHeaderCell" rowKey="id" :columns="tableColums" :dataSource="tableData"
            :border="false" :scroll="{ y: scroolHeight }" :pagination="false"
            style="background-color: rgba(9, 53, 99, 0.8);">
            <template slot="index" slot-scope="text, record,index">
                <div :data-json="JSON.stringify(index)">{{ index + 1 }}</div>
            </template>
            <template slot="status" slot-scope="text">
                <a-badge color="green" v-if="text == 'RUNNING'" />
                <a-badge color="yellow" v-else-if="text == 'COMPLETED'" />
            </template>
        </a-table>
    </div>
</template>
<script>
import { columns, demoData } from './setting';
import smoothscroll from 'smoothscroll-polyfill';
export default {
    name: 'ZSTable',
    props: {
        columns: {
            type: [Object, Array],
            default: () => [],
        },
        columnsName: {
            type: [String, Number],
            default: () => '',
        },
        data: {
            type: [Object, Array],
            default: () => [],
        },
        // 自动跳转
        isAutoPlay: {
            type: [Boolean],
            default: () => false
        },
        scroolHeight: {
            type: [Number, String],
            default: () => "",
        },
        onRefresh: {
            type: [Function],
            default: () => { }
        }
    },
    data() {
        return {
            tableColums: [],
            tableData: [],
            rowHeight: 38,
            // 滚动条位置
            scrollPosition: 0,
            // 定时器
            setTimeName: null,
        }
    },
    mounted() {
        // 平滑滚动
        smoothscroll.polyfill();
        // 如果没有传入表头数据
        if (this.columnsName != '' && this.columnsName) {
            this.tableColums = columns[this.columnsName];
        } else {
            this.tableColums = this.columns;
        }
        // 如果没有传入数据
        if (this.columnsName != '' && this.columnsName) {
            this.tableColums = columns[this.columnsName];
        } else {
            this.tableColums = this.columns;
        }
    },
    deactivated() {
        this.clearAll();
    },
    methods: {
        customHeaderCell: (column) => {
        },
        scrollToTop() {
            const table = this.$refs.table;
            if (table) {
                const container = table.$el.querySelector('.ant-table-body');
                if (container) {
                    container.scrollTop = 0;
                }
            }
        },
        clearAll() {
            clearInterval(this.setTimeName);
            this.setTimeName = null;
        },
        scrollTo() {
            let tableRef = this.$refs.tableRef
            if (!tableRef) {
                return
            }
            let tablScroll = tableRef.$el.querySelector('.ant-table-body');
            if (!tablScroll) {
                this.clearAll();
                return;
            }
            // 目前位置
            let nowPosition = tablScroll.scrollTop;
            if (nowPosition > 0) {
                nowPosition = Math.ceil(nowPosition / ((this.rowHeight * 1) + 1))
            }
            let targetTop = (this.rowHeight * (nowPosition + 1));
            const maxScrollTop = tablScroll.scrollHeight - tablScroll.clientHeight;
            if (targetTop > maxScrollTop) {
                targetTop = 0;
            }
            tablScroll.scrollTo({
                top: targetTop,
                behavior: "smooth",
            })
            // 存储当前位置
            this.scrollPosition = targetTop;
            if (targetTop == 0) {
                this.clearAll();
                this.onRefresh();
            }

        },
        demo() {
            this.onRefresh();
        }
    },
    watch: {
        data() {
            this.tableData = this.data;
            if (this.isAutoPlay) {
                let tableRef = this.$refs.tableRef
                let tablScroll = tableRef.$el.querySelector('.ant-table-body');
                if (tablScroll) {
                    tablScroll.scrollTo({
                        top: 0,
                        behavior: "smooth",
                    })
                }
                let times = this.columnsName == 'realTime' ? 3000 : 9000;
                this.setTimeName = setInterval(() => {
                    this.scrollTo();
                }, times)
            }
        }
    }

}
</script>
<style lang="less">
.tableWrap {
    width: 100%;
    height: 100%;


    .ant-table-wrapper,
    .ant-table-placeholder,
    .ant-spin-nested-loading,
    .ant-spin-container,
    .ant-table,
    .ant-table-content // ,.ant-table-body 

        {
        // width: 100%;
        // height: 100%;
    }

    /* 修改表头背景色 */
    .ant-table-thead>tr>th {
        background-color: rgba(9, 53, 99, 0.8);
        border-bottom: none;
    }

    /* 修改表头字体颜色 */
    .ant-table-thead>tr>th {
        color: #ffffff;
        font-family: AlibabaPuHuiTi;
        font-size: 10px;
        font-weight: 700;
        /* 你想要的颜色 */
    }

    .ant-table-body {
        background-color: transparent !important;
    }

    .ant-table-placeholder {
        background-color: rgba(9, 53, 99, 0.8);
        border-bottom: none;
        border-top: none;
        border: none;
        height: calc(100% - 28px);

        .ant-empty-description {
            color: #ffffff;
        }
    }

    .ant-table-tbody {
        color: #ffffff;

        td {
            background: linear-gradient(to bottom, rgba(2, 36, 121, 0.4), rgba(127, 158, 240, 0.4));
            border-bottom: 2px solid transparent;
            border-top: 2px solid transparent;
        }
    }

    .ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
        background-color: #0270B5;
    }
}

// 表头
.custom-table-header .ant-table-thead>tr>th {
    // height: 120px;
    // height: 1vh;
    // overflow: hidden;
    // min-height: 1vh !important;
    // overflow: hidden;
    background: linear-gradient(to top, rgba(26, 48, 102, 1), rgba(54, 102, 174, 1), rgba(0, 117, 255, 1));
    /* 你想要的表头高度 */
}

.ant-table-header-column {
    // span {
    //     height: 100%;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center
    // }
}


.ant-badge-status-text {
    display: none;
}
.ant-table-row {
  height: 28px;
  line-height: 28px; /* 确保文本垂直居中 */
}
</style>